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ABSTRACT 

Computer-based instruction (CBI) has undergone 
tremendous changes in the past decade. This paper focuies on the 
following three areas of designing information presentation: (1) 
screen design literature is dated, and the existing guidelines do nol 
allow for advances in computer technology; (2) open-ended guidelines 
may offer designers sufficient guidance for designing computer 
screens and user interfaces without stifling the creativity of the 
individual designer; (3) the paradigm of static screens has changed 
to one of active, interactive, screens filled with dynamic visual 
elements* The evolution of computer use and graphical user interface 
design, and the outdated literature are briefly described. Browsing 
is presented as a broad concept of interface design in computer-based 
learning environments, and seven guidelines for browsing are 
presented. Icons are proposed as a way in which CBI programs can use 
graphics (as opposed to the traditional redundancy between the object 
and the representational text.) Icons are considered dynamic, and are 
differentiated from static graphics because they show the user that. a 
choice is available. Interactive graphics, animations, and 
interactive text are other examples of possible screen dynamics. This 
paradigmatic shift is a move away from thinking of screens as 
individual pieces of the program, and a move towards thinking of 
screens as thread that can hold the interface and the program 
together. Three figures illustrate a CBI program interface* (Contains 
22 references.) (MAS) 
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Introduction 

Computer-based Instruction 
(CBI) has undergone tremendous 
changes in the past decade. 
Changes abound in not only how 
the programs look, but in what die 
programs ait intended to do. Most 
of us remember early pieces of CBI. 
They relied predominandy on text as 
the presentation medium, and inter- 
action was limited to pressing the 
space bar to continue. These pro- 
grams were linear in nature, and 
were limited in the types of infor- 
mation t jy could present, and the 
types of learning outcomes they 
could cover. Most of these pro- 
grams were written for the comput- 
ers that were available at that time. 
Computers such as Apple's lie, and 
IBM compatible XTs were only 
capable of displaying minimal 
graphics, and relied predominantly 
on text. Interaction was limited in 
most cases to the available input de- 
vice: the keyboard. Consequently, 
text based screens were controlled 
by keyboard commands. 

With the advent of the first 
widely used graphical user interface 
(GUI) computer, the Apple Macin- 
tosh, in 1984, it became possible to 
do more sophisticated things with 
the computer. Graphics were easier 
to edit and include in programs. Old 
monochrome green or amber 



screens have yielded way for the 
high resolution display devices most 
of us use today. Additionally, input 
in nearly all computers today may be 
done not only from the computer's 
keyboard, but with the help of the 
track ball or mouse. Users can now 
not only click on the right arrow to 
continue, but also control the rate of 
presentation of digitized video and 
audio, manipulate data and in- 
formation on the screen, and interact 
with the information in the program 
from a variety of perspectives. The 
way that computers may be used has 
changed drastically, and this change 
has had a dramatic impact on the use 
of computers as an instructional de- 
livery system. 

With the change in how com- 
puters can be used comes a change 
in how information appears on the 
screen. This paper focuses on the 
following three areas of designing 
information presentation: 

1. Screen design literature is 
dated, and the existing 
guidelines do not allow for 
advances in computer tech- 
nology; 

2. Open ended guidelines may 
offer designers sufficient 
guidance for designing com- 
puter screens and user inter- 
faces without stifling the 
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creativity of the individual 
designer, 
3. The paradigm of static 
screens has changed to one 
of active, interactive, screens 
filled with dynamic visual 
elements. 

The Literature is Dated 

Heines (1984) wrote the book, 
literally and metaphorically, on 
screen design. For years his ideas 
were used by designers and teachers 
of designers used to guide their ef- 
forts in designing screens for CBI 
programs. While Heines* book 
served a great many people well for 
a number of years, his work was 
written relati ve to the available tech- 
nology. This is also reflected in the 
lion's share of the research done in 
the area of screen design. Alessi 
and Troilip (1985); Bork (1987); 
Heines (1984); Hooper and Han- 
nafin (1986); Issacs (1987); Mor- 
rison, Ross, O'Dell, Schultz, and 
Higginbothan-Wheat (1989); and 
RambaUy and Rambally (1987) all 
conducted research in the area of 
textual manipulation as it applies to 
screen design. Once again, this lit- 
erature is quite dated. Hie guide- 
lines produced by this research sug- 
gested things such as never using 
itlaticized or bold text This was 
certainly true for old monochrome 
screens, but the advice seems odd in 
the face of high resolution display 
devices. 

Hooper and Hannafin (1988) and 
Hannaftn and Hooper (1989) began 
looking at how the design of the 
screen could be used to promote and 
engage learners relative to individual 
learning styles. Keller and Suzuki 
(1988) proffered ways in which the 
screen could be used to motivate the 
user into using the CBI program. 
But all of these efforts were focus- 
ing on the screen as a static delivery 
system. A delivery system that 
would allow for the users to acquire 



information in a passive environ- 
ment, sitting and reading and 
watching while they absorbed all of 
the designer ordered information in 
the program. While Jonnasen 

(1988) began to flirt with the no- 
tions of constructivism as it applied 
to CBI, and offered suggestions for 
how to engage learners in a more 
realistic environment, Grabinger 

(1989) began to look at the screens 
as a dynamic medium through his 
first efforts at multiple clement re- 
search. But this research looked at 
the design of the screen as a static 
environment, and these guidelines 
provided designers with specific 
things to do when designing the 
screen. These specifics soon be- 
came outdated as technology rapidly 
out grew these recommendations. 

User Interface Design 

All of this literature focused on 
the design of the screen, and screens 
were seen as individual units linked 
together by proceeding through the 
information a screen at a time. 
However, in today's environments, 
windows overlap, multiple events 
can happen on the same screen at 
one time, and die user is faced with 
controlling not only a complex piece 
of software, but also a complex 
piece of instruction. Users control 
this complex environment through 
the use of the user interface (Jones, 
1993). And while literature on the 
design of the user interface does 
exist, (Blaser & Zoeppritz, 1982; 
Schneiderman, 1987) it exists 
within the area of human computer 
interaction (Booth, 1989; Carroll & 
Moran, 1991; Diaper, 1987; Dumas, 
1988; Eason, 1988) on topics such 
as system software design and ap- 
plication software design. Jones 
(1989) male an excellent effort in 
beginning to discuss user interface 
design in terms of CBI, but little 
else exists in the area of user inter- 
face design as it applies to educa- 
tional software. The difference 
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between educational software and 
application software and system 
software is immense. 

Eventually, given enough time 
and practice, anybody can learn any 
interface-even MS-DOS. We be- 
come intimately familiar with how 
our systems work. We know what 
different icons mean, what com- 
mands we need to copy, move, de- 
lete and rename files. In the appli- 
cations we use daily, we are com- 
fortable in doing the things we need 
to do, and in experimenting with the 
software to do new things. We use 
these things almost daily. How- 
ever, CBI is a one shot deal. The 
purpose of the software is not to 
create lifetime users. The purpose is 
to get the users into the program, 
teach them the things they need to 
know, and then get them out. In- 
structional and educational software 
is not used on a daily basis. Using 
the interface becomes more im- 
portant because users need to under- 
stand it almost instantly. 

Laurel (1991a; 1991b) has pro- 
vided us with the most recent ar- 
ticulations of what user interfaces 
should do, but once again this fo- 
cuses on areas that are not directly 
related to educational and instruc- 
tional software. While it is possible 
to extrapolate much of this in- 
formation to be applied to the design 
of educational and instructional 
software, the problem remains that 
there is a dearth of research into 
how the screen in a CBI program 
can incorporate a dynamic interface 
to promote the acquisition of knowl- 
edge to the end of promoting and 
improving human learning. 

Broad Concepts Of Interface 
Design 

Technology will move beyond 
any set of specific set of do's and 
don'ts for the design of the screen 
or the design of the user interface 



(Jones, 1993). While today we 
wrestle with digital video and multi- 
ple window, tomorrow we will be 
faced with virtual reality. All of 
these changes effect not only what 
the computer can do, but what can 
be done with education as it is deliv- 
ered on the computer. 

Programs such as IBM's Illu- 
minated Books and Manuscripts, 
and Columbus: Encounter, Discov- 
ery, and Beyond* pushed the enve- 
lope of not only what had been done 
before technically, but in what edu- 
cational software could be. While 
Heines (1984) recommended that 
screens have specific functional ar- 
eas, or areas on the screen where 
information could always be found, 
these programs used overlapping 
windows and presentation areas that 
required the user to manipulate the 
information on the screen. These 
dynamic programs make it nearly 
impossible to say where things 
should go on the screen. As with 
any multiple windowed environ- 
ment, it is ultimately the user who 
will decide what window is dis- 
played, and when it should be dis- 
played. And it is this new found 
control by the users that may drive a 
shift in paradigms from designer 
driven instructional delivery to user 
driven instructional delivery. 

Jones (1993) proposed a set of 
guideline for the design of user in- 
terfaces iii computer-based learning 
environments. These guidelines do 
not offer the user do's and don'ts 
about what to do and when to do it 
(Hill, 1994), but, rather, offer the 
designer a set of issues to consider 
when designing the screens and ul- 
timately the user interface for com- 
puter-based learning environments. 

For example, one concept of 
interface design is browsing. 
Browsing allows for the flexible 
exploration of the content of the 
program through a variety of con- 
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trols. Browsing can be done topi- 
cally by providing users with a list 
of the topics coveted in the program 
through the use of a menu (See Fig- 
ure 1). Once a topic is selected, us- 
ers can use methods such as clicking 
on right and left arrows to access 
related or extended material. While 
browsing should be flexible and ex- 
ploratory, it should not be indis- 
criminate or uncontrolled Users 
need to be able explore the program 
for new information, know where 
they found it, and be able to find it 
again. One common method of 
providing for browsing in a com- 
puter-based learning environment is 
through the use of menus, (See Fig- 
ure 1) lists of navigational and in- 
formational choices, and right and 
left arrows, buttons on the screen 
designed to take the user to the 
"next" or "previous" screen (See 
Figure 2). With the advent of die 
GUI, and the power of the modem 
authoring systems, it is now possi- 
ble for users to browse through the 
use of terms entered on the key- 
board, through clicking on "hot 
word" as in a hypertext environ- 
ment, by choosing from pop-up 
menus, or by clicking on a portion 
of a graphic to take the user to a va- 
riety of places. These interface ele- 
ments are illustrated in Figure 3. 

The guidelines for browsing are 
presented below. While there are 
other concepts of interface design 
(Jones, 1993), this example is in- 
cluded to illustrate what the concepts 
of interface design are intended to 
be, and, when coupled with die in- 
cluded figures, how they might be 
implemented 

Guidelines for Browsing 

1. Provide selectable areas to allow 
users to access information. 

Some possible selectable areas 
to consider are buttons and hot text 
within a text field. The location of 
these elements on the screen will 
depend on the available screen real 



estate and the function of the se- 
lectable areas. It is recommended 
that the placement of selectable areas 
be tested with users to find out what 
is the optimal location for them. 
The selectable area will be a control 
element for users to access informa- 
tion. The control chosen will de- 
pend on the task to be done. Be 
consistent in implementing particular 
controls for particular functions. 

2. Allow users to access informa- 
tion in a user-determined order. 

This may be done through topic 
indexes of all of the information 
available in the program, or through 
the use of different types of menus. 
Another technique to consider is al- 
lowing for user-entered search 
terms. Exploration should be flexi- 
ble, and the controls for accessing 
information should reflect flexibil- 
ity. 

3. Provide maps so that users can 
find where they are and allow provi- 
sions to jump to other information 
of interest from the map. 

Because the content of com- 
puter-based learning environments 
tends to be complex, using visual or 
iconographic maps may be too diffi- 
cult to include and too confusing for 
users to understand. What we now 
consider as maps may have to 
change drastically. Text based in- 
dexes, outlines, and tables of con- 
tent may be considered as alterna- 
tives to maps. 

4. Provide users with feedback to 
let them know that they must wait 
when significant time delays are re- 
quired for the program to access in- 
formation. 

Many programs use watch cur- 
sors, or text messages that ask users 
to "be patient. 11 Another technique 
to consider is to offer users some 
type of visual stimulus to maintain 
their interest while the computer is 
preparing to present the requested 
information. However, visual 
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Figure L Browsing through a CBI program through the use of a menu. 
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Figure 2. Browsing through a CBI progam through the use of right and left mow keys. 
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stimulus should be chosen carefully 
and kept as simple as possible. 

5. Provide users with information 
that lets them know that they are 
making progress. 

Because the information in com- 
puter-based learning environments 
is not organized sequentially, there 
is no determined order that users 
must follow through a program. 
Consequently users may feel that 
they are working in a program with- 
out making progress. Some tech- 
niques that may be considered to 
give users a sense of accomplish- 
ment are path history mechanisms 
that tell users what information they 
have seen, or visual cues that indi- 
cate progression. Another technique 
would be to break the program up 
into chunks that may give learners a 
feeling of accomplishment 

6. Arrange information in a non- 
threatening manner so that users ere 
not overwhelmed by the amount of 
information contained in a program. 

To accomplish this consider set- 
ting up information with an over- 
view of a topic that acts as a top 
layer of information. As users need 
more information they can move 
progressively deeper through the 
layers of information. Moving 
through the layers of information 
could be done through the use of 
pop-up menus, buttons, or hot text. 

7. Provide visual effects to give 
users visual feedback that their 
choices have been made and regis- 
tered by the program. 

Buttons, icons, and menus can 
be highlighted or animated to show 
users that a choice has been made. 
Keep the highlighting or animation 
simple. The duration of a highlight 
or animation should be long enough 
to be registered visually by the us- 
ers, but short enough so that users 
are not waiting for an animation to 
be over so that they can get to the 
information they want. 



Visual effects, such as wipes, 
fades, and zooms may be used to 
indicate access to a particular piece 
of information. The use of these 
visual effects should be consistent. 
Do not use them simply because 
they are available, but rather use 
them to indicate a particular action of 
the program. Additionally, be con- 
sistent in the use of a visual effect 
If wipes art used when clicking on a 
right arrow, use them throughout 
the program. If zoom outs ait used 
when clicking on a menu item, then 
use zoom ins when returning to the 
menu. Above all, make the visual 
effect have meaning and be consis- 
tent with its use throughout the pro- 
gram. 

A New Paradigm for the De- 
sign of User Interfaces 

Reiber (1994) makes the dis- 
tinction between static graphics and 
animation. While this distinction is 
quite true, it fails to take into ac- 
count the possibility of dynamic 
graphics. Dynamic graphics can be 
found throughout the computer- 
based learning environment 
Graphics are traditionally thought of 
as a separate element of the screen. 
The purpose of the graphic has been 
to offer significant redundancy be- 
tween the objected the text used to 
describe it While this was true for 
early pieces of CBI, today's pro- 
grams use graphics in a variety of 
ways beyond simply illustrating a 
point. Icons are a poignant example 
of this. 

Icons are used to indicate to 
the user that a choice is available. 
Left and right arrows indicate that 
users may go "next" and 
"previous", hooked arrows indicate 
that a return to the previous menu is 
possible, question marks may repre- 
sent the availability of on-line help, 
and directional arrows may offer the 
user the chance to see a map to help 
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them decide where they want to go. 
While these graphics may be static, 
they ait in fact dynamic as well. 
They show the user that a choice is 
possible. When they arc selected, 
they may be highlighted to indicate 
that a choice has been made. When 
they arc clicked upon, something 
happens: the user is carried to a dif- 
ferent point in the program. The 
choice of what icon to use, whether 
or not to label the icon, and what 
icons arc appropriate for a particular 
learning environment arc of para- 
mount importance. 

Additionally, graphics may be 
interactive. Scanned images and 
clip art can have buttons layered 
over them, offering the user the 
chance to explore an image and re- 
ceive further information. 

Animations can obviously offer 
the user a dynamic element in the 
program. While research has 
shown no significant difference in 
the use of static graphics versus 
animation (Reiber, 1994), it is gen- 
erally recognized that the use of 
animation can offer many subtle 
benefits (Reiber, 1994). When the 
animation is congruent to the learn- 
ing task, it can offer instructional 
benefits to the learners (Reiber, 
1990). 

Graphics arc not the only ele- 
ments of the screen that can be dy- 
namic. Text can also provide the 
users with options, choices, and 
navigational cues (Kahn & Landow, 
1993). While text on the CBI 
screen has traditionally been used as 
a passive medium, it is now possi- 
ble for the text to be an active part of 
the screen. Text formatting such as 
underlining, holding, and italicizing 
can provide users with a different 
type of visual to be used when ac- 
cessing information. The user can 
click on text to view graphics, see 
further textual information, activate 



a link to another section, and to acti- 
vate a pop-up menu (See Figure 3). 

The point is that the computer is 
a dynamic medium. Authoring 
systems make it possible for non 
programmers to develop remarkably 
sophisticated programs which are 
interactive and kinetic. Conse- 
quently, designers need to provide 
opportunities for the user to take 
advantage of its potential. 

The paradigmatic shift that I am 
suggesting is one where we move 
away from thinking of screens as 
individual pieces of the program, 
and move towards thinking of 
screens as the thread that can hold 
the interface, and, ultimately, the 
program together. Deciding on a 
theme for a program can help de- 
signers pull the thread through the 
interface, providing the user with 
controls, displays, and informa- 
tional elements which can keep the 
user interested, help the user find 
out where they arc, and ultimately 
aid the user in the complex process 
of taking the information out of the 
program and integrating it into their 
own conceptual knowledge base. In 
short, the interface should not only 
guide the user and present infor- 
mation, but help in the process of 
promoting and advancing human 
learning. 
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